<?php
declare(strict_types=1);

namespace LowCode\Naive;

use LowCode\Naive;
use LowCode\Support\JsExp;
use LowCode\Traits\Props\HasContentClass;
use LowCode\Traits\Props\HasContentStyle;

/**
 * 滚动条
 * <br> 滚动特定距离: scrollBy【(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void】
 * <br> 滚动内容: scrollTo【(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void】
 * @method static Scrollbar make(mixed $children = null) Scrollbar组件
 */
class Scrollbar extends Naive
{
    use HasContentClass, HasContentStyle;

    public function __construct(mixed $children = null)
    {
        parent::__construct();
        $this->children($children);
    }

    /**
     * 滚动条的大小
     * @param int|JsExp $value
     * @return $this
     */
    public function size(int|JsExp $value): static
    {
        return $this->prop("size",$value);
    }

    /**
     * 滚动条的大小
     * @param string|JsExp $value
     * @return $this
     */
    public function trigger(string|JsExp $value = 'hover' | 'none'): static
    {
        return $this->prop("trigger",$value);
    }

    /**
     * 是否可以横向滚动
     * @param bool|JsExp $value
     * @return $this
     */
    public function xScrollable(bool|JsExp $value = true): static
    {
        return $this->prop("x-scrollable",$value);
    }

    /**
     * 是否可以横向滚动
     * @param string $event (e: Event) => void
     * @param string|null $id
     * @param array $modifiers
     * @return $this
     */
    public function onScroll(string $event, string $id = null, array $modifiers = []): static
    {
        return $this->event("scroll", jsFn($event, $id), $modifiers);
    }
}

